<template>
  <div class="monitor">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="background-color:#00e676;color: snow ">编辑</el-button>
        <el-button style="background-color:#00e676;color: snow ">视频分页</el-button>
        <el-button style="background-color:#00e676;color: snow ">增加分页</el-button>
        <el-button style="background-color:#00e676;color: snow ">自动翻页</el-button>
        <el-button style="float: right;background-color: #02b340;color: snow;margin: 0">全部播放</el-button>
        <el-button style="float: right;background-color: #02b340;color: snow;margin: 0"
                   @click="handleChangeViewPortNum(16)"
        >
          <i class="el-icon-s-grid"/>
        </el-button>
        <el-button style="float: right;background-color: #02b340;color: snow;margin: 0"
                   @click="handleChangeViewPortNum(9)"
        >
          <i class="el-icon-menu"/>
        </el-button>
        <el-button style="float: right;background-color: #02b340;color: snow;margin: 0"
                   @click="handleChangeViewPortNum(4)"
        >
          <i class="el-icon-menu"/>
        </el-button>

        <el-button style="float: right;background-color: #02b340;color: snow;margin: 0"
                   @click="handleChangeViewPortNum(1)"
        >
          <i class="el-icon-menu"/>
        </el-button>
      </div>
      <el-row :gutter="10" class="row-container">
        <el-col :span="~~(24/Math.sqrt(options.selectNums))" v-for=" i in options.selectNums" :key="i">
          <div class="main-monitor-container">
            <video :ref="'video-'+i" :id="'video-'+i" class="video"></video>
          </div>
        </el-col>

      </el-row>
    </el-card>
  </div>
</template>

<script>
import mpegts from 'mpegts.js';

export default {
  name: 'index',
  data() {
    return {
      options: {
        selectNums: 4
      }
    };
  },
  mounted() {
    if (mpegts.getFeatureList().mseLivePlayback) {
      let videoElement = document.querySelectorAll('video');
      videoElement.forEach(
        a => {
          let player = mpegts.createPlayer({
            type: 'flv',
            isLive: true,
            url: 'http://139.155.232.126:8080/live?app=live&stream=test1234'
          });
          player.attachMediaElement(a);
          player.load();
          player.play();
          player.pause();
        }
      );

    }
  },
  methods: {
    // 修改窗口数目
    handleChangeViewPortNum(num) {
      console.log(num);
      this.options.selectNums = num;
    }
  }

};

</script>

<style scoped lang="scss">

.row-container {

  .main-monitor-container {
    display: block;
    width: 100%;
    background-color: #222222;
    height: 200px;
    margin-bottom: 20px;

    .video {
      display: inline-block;
      width: 100%;
      background-color: #222222;
      height: 200px;
      margin-bottom: 20px;

    }
  }
}
</style>
